<style>
    .bg-white{
    background-color: #fff;
}
.cursor-pointer{
    cursor:pointer;
}
.block{
    display: block;
}
 
@media (min-width: 768px) {
  .person-container{
      max-height: 370px;
      overflow-y: scroll;
    }  
}

</style>
<div >
    <div class="container">
        <h1>虚拟人口播</h1><a href="/" target="__blank">使用教程</a>
        <div class="row">
            <div class="bg-white col-md-8 text-center">
                <img id='avatar' class="img-responsive" src="/assets/addons/human/img/lisa-casual-sitting-transparent.png"/>
            </div>
            <div class="col-md-4">
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="#person" data-toggle="tab">虚拟形象</a></li>
                    <li role="presentation"><a href="#background" data-toggle="tab">背景</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active person-container" id="person">
                        {volist name="persons" id="person"}
                        <img class="img-thumbnail img-lg avatar-thumbnail cursor-pointer" src="/assets/addons/human/img/{$person}-thumbnail.png" />
                         {/volist}
                    </div>
                    <div role="tabpanel" class="tab-pane" id="background">
                        {volist name="colors" id="color"}
                        <div class="img-thumbnail img-lg bg-thumbnail cursor-pointer" style="background-color:{$color}" data-bg="{$color}"></div>
                         {/volist}
                        <!--<img class="img-thumbnail img-lg bg-thumbnail cursor-pointer" src="/assets/addons/human/img/white.png" />-->
                        <!--<img class="img-thumbnail img-lg bg-thumbnail cursor-pointer" src="/assets/addons/human/img/transparent.png" />-->
                    </div>
                </div>
            </div>
            
        </div>
        <form  name="form" id="synthesis-form" class="form-vertical" method="POST" action="" >
            <div class="form-group">
                <label for="language" class="control-label ">选择语言:</label>
                <select class="form-control" name="language" data-rule="required">
                    <option value="mandarin">普通话</option>
                    <option value="dongbei">东北话</option>
                    <option value="sichuan">四川话</option>
                    <option value="henan">河南话</option>
                    <option value="shanxi">陕西话</option>
                    <option value="shanghai">上海话</option>
                    <option value="taiwan">台湾腔</option>
                    <option value="guangdong">粤语</option>
                </select>  
            </div>
            <div class="form-group">
                <label for="voice" class="control-label">选择语音:</label>
                <select class="form-control" name="gender" data-rule="required">
                    <option value="female">女声</option>
                    <option value="male">男声</option>
                </select>  
            </div>
            <div class="form-group">
                <textarea name='content' class="form-control" rows="6" placeholder="请输入您要播报的台词" data-rule="required">你好，我是明志科技的虚拟人主播小西，您可以在这里输入您要想要播报的内容，我将为您生成你想要的视频.您可以在右侧选择任务和背景颜色，也可以选择各种方言和声音。希望您用的愉快！</textarea>  
            </div>
            <div class="form-group hidden">
                <label class="control-label">人物:</label>
                <input name='character' class="form-control" data-rule="required" value="Lisa"/>
            </div>
            <div class="form-group hidden">
                <label class="control-label">姿态:</label>
                <input name='style' class="form-control" data-rule="required" value="casual-sitting"/>
            </div>
            <div class="form-group hidden">
                <label class="control-label">背景:</label>
                <input name='bg' class="form-control" data-rule="required" value="#FFFFFFFF"/>
            </div>
            <div class="form-group layer-footer">
              <button type="submit" class="btn btn-primary btn-embossed disabled">生成视频</button> 
            </div>
        </form>
    </div>
</div>

